<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-model指令 监听用户输入事件 从而更新数据</title>
    <!-- 引入本地下载好的 vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- div id="app" 挂载点 -->
    <div id="app">
      <h1>实时搜索功能</h1>
      <input type="text" v-model="search" placeholder="请输入搜索内容" />
      {{ search }}
      <br />
      <div v-for="item in filteredItems">
        {{ item.name }}
      </div>
      <!-- 搜索结果 -->
    </div>

    <!-- 创建一个vue实例 -->
    <script type="text/javascript">
      // 创建一个vue实例
      var vm = new Vue({
        // 挂载点
        el: "#app",
        // 数据
        data: {
          search: "",
          items: [
            { id: 202319180601, name: "陈全扬" },
            { id: 202319180602, name: "陈严标" },
            { id: 202319180603, name: "陈宇" },
            { id: 202319180604, name: "陈宇航" },
            { id: 202319180605, name: "戴依" },
            { id: 202319180606, name: "邓慧心" },
            { id: 202319180607, name: "邓琪妍" },
            { id: 202319180608, name: "邓卓凡" },
            { id: 202319180609, name: "冯平安" },
            { id: 202319180610, name: "符思仪" },
            { id: 202319180611, name: "高佳晨" },
            { id: 202319180612, name: "郭俊辉" },
            { id: 202319180613, name: "胡炳杰" },
            { id: 202319180614, name: "黄富成" },
            { id: 202319180615, name: "黄天宇" },
            { id: 202319180616, name: "雷俊杰" },
            { id: 202319180618, name: "李先皓" },
            { id: 202319180619, name: "李祥" },
            { id: 202319180620, name: "李勇" },
            { id: 202319180621, name: "廖阳" },
            { id: 202319180622, name: "刘婷" },
            { id: 202319180623, name: "孟翔宇" },
            { id: 202319180624, name: "彭刚胜" },
            { id: 202319180625, name: "邱思琪" },
            { id: 202319180626, name: "宋政阳" },
            { id: 202319180627, name: "王洪铭" },
            { id: 202319180628, name: "向舟帆" },
            { id: 202319180629, name: "肖思思" },
            { id: 202319180630, name: "肖轩" },
            { id: 202319180632, name: "鄢宏辉" },
            { id: 202319180634, name: "杨丽莹" },
            { id: 202319180635, name: "袁越" },
            { id: 202319180636, name: "张康" },
            { id: 202319180637, name: "张志豪" },
            { id: 202319180638, name: "赵裕鑫" },
            { id: 202319180639, name: "郑翔" },
            { id: 202319180640, name: "周高桥" },
            { id: 202319180641, name: "朱海莲" },
            { id: 202319180642, name: "邹湘龙" },
          ],
          searchResult: [], // 搜索结果
        },

        // const result = words.filter((word) => word.length > 6);
        computed: {
          // 计算属性
          filteredItems() {
            // 过滤数据
            return this.items.filter((item) => {
              // 过滤条件
              return item.name.indexOf(this.search) > -1;
            });
          },
        },
      });
    </script>
  </body>
</html>
